<template>
  <div>
    <div class="selector">
      <el-button type="success" @click="dialogFormVisible1 = true">添加成员</el-button>
    </div>

    <el-dialog title="添加成员" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form1.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="身份" :label-width="formLabelWidth">
          <el-select v-model="form1.identity" placeholder="请选择身份">
            <el-option label="老师" value="老师"/>
            <el-option label="学生助理" value="学生助理"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="form1.build" placeholder="请选择部门">
            <el-option label="定静楼一" value="定静楼一"/>
            <el-option label="定静楼二" value="定静楼二"/>
            <el-option label="定静楼三" value="定静楼三"/>
            <el-option label="定静楼四" value="定静楼四"/>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="form1.account" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form1.password" autocomplete="off" show-password/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addMember(), dialogFormVisible1 = false" :disabled="canClick">确 定</el-button>
      </div>
    </el-dialog>




    <el-table
            :data="userData"
            class="table">
      <el-table-column
              label="姓名"
              width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="身份"
              width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.identity }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="账号"
              width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="所属部门"
              width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.build }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row), dialogFormVisible = true">编辑
          </el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row), dialogVisible = true"

          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="身份" :label-width="formLabelWidth">
          <el-select v-model="form.identity" placeholder="请选择身份">
            <el-option label="老师" value="老师"/>
            <el-option label="学生助理" value="学生助理"/>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input class="input" v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="form.build" placeholder="请选择部门">
            <el-option label="定静楼一" value="定静楼一"/>
            <el-option label="定静楼二" value="定静楼二"/>
            <el-option label="定静楼三" value="定静楼三"/>
            <el-option label="定静楼四" value="定静楼四"/>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="UpdateData(), dialogFormVisible = false ">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <span>确认删除吗?</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="deleteData(), dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {addition, deleteUserData, updateUserData, getUserData} from "../../network/personTable";


  export default {
    name: "PersonMgt",
    data() {
      return {
        userData: [
        ],
        formLabelWidth: '120px',
        form: {
          identity: '',
          name: '',
          build: ''
        },
        form1: {
          name: '',
          identity: '',
          account: '',
          password: '',
          build: ''
        },
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogVisible: false,
        currentIndex: 0,
        canTouch: true
      }
    },
    watch: {
      form1:  {
        handler: function() {
          if (this.form1.name && this.form1.identity && this.form1.account && this.form1.password && this.form1.build) {
            this.canTouch = false
          } else {
            this.canTouch = true
          }
        },
        deep: true

      }
    },
    created() {
      this.getUserData()
    },
    computed: {
      canClick() {
        return this.canTouch
      }
    },
    methods: {
      handleEdit(index, row) {
        // console.log(index, row);
        this.currentIndex = index
        this.form.identity = this.userData[this.currentIndex].identity
        this.form.name = this.userData[this.currentIndex].name
        this.form.build = this.userData[this.currentIndex].build
      },
      handleDelete(index, row) {
        this.currentIndex = index
        console.log(index, row);
      },
      UpdateData() {
        this.userData[this.currentIndex].identity = this.form.identity
        this.userData[this.currentIndex].name = this.form.name
        this.userData[this.currentIndex].build = this.form.build
        this.updateUserData(this.userData[this.currentIndex]._id, this.form.identity, this.form.name, this.form.build)
      },
      deleteData() {
        this.deleteUserData(this.userData[this.currentIndex]._id)
        this.userData.splice(this.currentIndex, 1)
      },
      addMember() {
        this.addition(this.form1.name, this.form1.identity, this.form1.account, this.form1.password, this.form1.build)
        this.$router.go(0);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },


      /**
       * 网络请求相关方法
       */

      getUserData() {
        getUserData().then(res => {
          // console.log(res);
          this.userData = res
        })
      },
      updateUserData(id, identity, name, build) {
        updateUserData(id, identity, name, build).then(res => {
          // console.log(res);
        })
      },
      deleteUserData(id) {
        deleteUserData(id).then(res => {
          // console.log(res);
        })
      },
      addition(name, identity, account, password, build) {
        addition(name, identity, account, password, build).then(res => {
          // console.log(res);
        })
      }
    }
  }
</script>

<style scoped>
  .selector {
    display: flex;
    text-align: left;
    margin-left: 1%;
    margin-top: 2%;
  }

  .table {

    width: 98%;
    margin: 0 auto;
    margin-top: 1%;
    border: 1px solid #eee;
    border-radius: 4px;

  }
</style>